<template>
  <a-layout id="FormDesignIndex" class="container">
    <!--工具栏-->
    <a-layout-header>
      <tool-bar
        v-model:design-type="designType"
        :form-list="componentConfigs"
        :form-config="formConfig"
        @select-item="selectItem"
        @console-event-config="consoleEventConfig"
      />
    </a-layout-header>
    <!-- 表单设计 -->
    <a-layout v-if="designType" has-sider>
      <!--组件选择区-->
      <a-layout-sider :width="280">
        <item-select @dragClone="selectItem" />
      </a-layout-sider>

      <!--表单渲染-->
      <a-layout-content>
        <a-resize-box
          v-model:width="resizeBoxWidth"
          v-model:height="resizeBoxHeight"
          :directions="['left','right', 'top','bottom']"
          :style="{
            width: '100%',
            minWidth: '100px',
            maxWidth: '100%',
            height: '100%',
            textAlign: 'center'
          }"
        >
          <form-container
            v-model:configs="componentConfigs"
            v-model:model="formModel"
            @select-item="selectItem"
            @delete-item="deleteItem"
          />
        </a-resize-box>
      </a-layout-content>

      <!--组件设置-->
      <a-layout-sider :width="380">
        <item-setting
          v-model:config="selected"
          v-model:form-config="formConfig"
        />
      </a-layout-sider>
    </a-layout>

    <!-- 事件设计 -->
    <a-layout v-else>
      <event-design
        ref="eventRef"
        v-model:config="eventConfigs"
      />
    </a-layout>
  </a-layout>
</template>

<script lang="ts" setup>
import { ref, provide, getCurrentInstance, defineExpose } from 'vue';
import { ComponentConfig } from '@/components/form-design/item-select/config/type';
import { EventConfigItem } from '@/components/form-design/event/type';
import { cloneDeep } from 'lodash';
import { ACTION_MAP, EVENT_MAP, EVENT_BUS } from '@/components/form-design/event';
import {
  PROVIDE_KEY_ACTION_MAP,
  PROVIDE_KEY_EVENT_MAP,
  PROVIDE_KEY_EVENT_BUS,
  PROVIDE_KEY_SELECTED,
  PROVIDE_KEY_FORM_CONFIG,
  PROVIDE_KEY_FROM_INSTANCE,
  PROVIDE_KEY_FORM_TYPE,
  PROVIDE_KEY_FORM_PERMISSION
} from '@/components/form-design/provide_key';
import ToolBar from '@/components/form-design/tool-bar/index.vue';
import FormContainer from '@/components/form-design/form-container/index.vue';
import ItemSelect from '@/components/form-design/item-select/index.vue';
import ItemSetting from '@/components/form-design/item-setting/index.vue';
import EventDesign from '@/components/form-design/event/index.vue';

const proxy = getCurrentInstance();

// 表单配置项
const formConfig = ref({
  size: 'medium',
  layout: 'horizontal',
  labelAlign: 'left',
  labelColProps: {
    span: 5,
    offset: 0
  },
  wrapperColProps: {
    span: 19,
    offset: 0
  }
});

// 表单控件列表
const componentConfigs = ref<Array<ComponentConfig>>([]);

const eventConfigs = ref<Array<EventConfigItem>>([]);


// 被选中的表单组件
const selected = ref<ComponentConfig>({
  name: '',
  group: 'container',
  type: '',
  component: '',
  settingComponent: ''
});

// 表单值
const formModel = ref({});

const resizeBoxWidth = ref();

const resizeBoxHeight = ref();

const designType = ref<boolean>(true);

provide(PROVIDE_KEY_ACTION_MAP, ACTION_MAP);
provide(PROVIDE_KEY_EVENT_MAP, EVENT_MAP);
provide(PROVIDE_KEY_EVENT_BUS, EVENT_BUS);
provide(PROVIDE_KEY_SELECTED, selected);
provide(PROVIDE_KEY_FORM_CONFIG, formConfig);
provide(PROVIDE_KEY_FROM_INSTANCE, proxy);
provide(PROVIDE_KEY_FORM_TYPE, 'design');
provide(PROVIDE_KEY_FORM_PERMISSION, {});

const selectItem = (value: ComponentConfig) => {
  selected.value = value;
};

const deleteItem = (value: ComponentConfig) => {
  if (value.id === selected.value.id) {
    selected.value = {
      id: '',
      name: '',
      group: 'container',
      type: '',
      component: '',
      settingComponent: ''
    };
  }
};

const consoleEventConfig = () => {
  console.log('ACTION_MAP', ACTION_MAP);
  console.log('EVENT_MAP', EVENT_MAP);
  console.log('eventConfigs', eventConfigs.value);
};

/**
 * 设置表单配置值
 * @param formConfigValue       表单配置
 * @param componentConfigsValue 表单组件配置列表
 * @param eventConfigsValue     表单事件配置
 */
const setConfig = (formConfigValue: any,
                   componentConfigsValue: Array<ComponentConfig>,
                   eventConfigsValue: Array<EventConfigItem>) => {
  if (formConfigValue) {
    formConfig.value = cloneDeep(formConfigValue);
  }
  if (componentConfigsValue) {
    componentConfigs.value = cloneDeep(componentConfigsValue);
  }
  if (eventConfigsValue) {
    eventConfigs.value = cloneDeep(eventConfigsValue);
  }
  EVENT_BUS.eventConfigs = eventConfigs;
};

/**
 * 获取表单配置值
 */
const getConfig = () => {
  return {
    formConfig: formConfig.value,
    componentConfigs: componentConfigs.value,
    eventConfigs: eventConfigs.value
  };
};

defineExpose({
  setConfig,
  getConfig
});
</script>

<script lang="ts">
export default {
  name: 'FormDesign'
};
</script>

<style lang="less" scoped>
.container {
  height: 100%;
  width: 100%;
}
</style>